<template>
  <div>
    <div class="top-panel">
      <el-card>
        <el-form  label-width="70px" label-position="right">
          <el-row>
            <el-col :span="5">
              <el-form-item label="角色名称">
                <el-input
                    class="password-input"
                    v-model="searchForm.roleNameFuzzy"
                    clearable
                    placeholder="支持模糊搜索"
                    @keyup.enter.native="loadDataList">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="描述">
                <el-input class="password-input"
                          v-model="searchForm.roleDescFuzzy"
                          clearable
                          placeholder="支持模糊搜索"
                          @keyup.enter.native="loadDataList">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" :style="{paddingLeft:'10px'}">
              <el-button type="success" @click="loadDataList()">查询</el-button>
              <el-button type="primary" @click="showEdit()"   v-has="proxy.PermissionCode.role.edit">新增角色</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>

    <!-- 内容区域 -->
    <el-row
        :gutter="20"
        :style="{marginTop:'10px'}">
      <el-col :span="18">
        <el-card :style="{ height: 'calc(100vh - 192px)'}">
          <template #header>
            <span>角色列表</span>
          </template>
          <Table
              ref="tableInfoRef"
              :columns="columns"
              :fetch="loadDataList"
              :dataSource="tableData"
              :options="tableOptions"
              :extHeight="tableOptions.extHeight"
              @row-click="handleRowClick">
            <template #operation="{ index,row }">
              <div class="row-op-panel">
                <a
                    class="a-link"
                    href="javascript:void(0)"
                    @click="showEdit(row)"
                    v-has="proxy.PermissionCode.role.edit"
                >修改</a>
                <a
                    class="a-link"
                    href="javascript:void(0)"
                    @click.prevent="delRole(row)"
                    v-has="proxy.PermissionCode.role.del"
                >删除</a>
              </div>
            </template>
          </Table>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="top">
              <span>菜单信息</span>
              <el-button type="primary" @click="saveMenu"  v-has="proxy.PermissionCode.role.edit">保存</el-button>
            </div>
          </template>
          <div>
            <el-tree
                class="tree-panel"
                ref="menuTreeRef"
                node-key="menuId"
                show-checkbox
                :data="treeData"
                default-expand-all
                v-if="treeData.length"
                :props="replaceFields"
                :check-strictly="false"
            >
            </el-tree>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script setup>
import {onMounted, ref, getCurrentInstance, nextTick} from "vue";

const {proxy} = getCurrentInstance();

const api = {
  loadRole: "/settings/loadRoles",
  loadMenu: "/settings/menuList",
  saveRoleMenu: "/settings/saveRoleMenu",
  roleDetail: "/settings/getRoleByRoleId",
  delRole: "/settings/delRole",
}

const searchForm = ref({})

const tableData = ref({});
const tableOptions = ref({
  extHeight: 125,
})

const columns = [
  {
    label: "角色名称",
    prop: "roleName",
  }, {
    label: "描述",
    prop: "roleDesc"
  }, {
    label: "创建时间",
    prop: "createTime"
  }, {
    width: 100,
    label: "操作",
    scopedSlots: "operation"
  },
]

const tableInfoRef = ref();
// 当前选择行
const currentRow = ref();

const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo,
    pageSize: tableData.value.pageSize,
    ...searchForm.value
  }
  let result = await proxy.Request({
    url: api.loadRole,
    params: params,
  })
  if (!result) {
    return;
  }
  tableData.value = result.data;
  // 第一次显示第一行
  if (!currentRow.value && result.data.list.length > 0) {
    currentRow.value = result.data.list[0];
    handleRowClick(currentRow.value);
  }
  nextTick(() => {
    tableInfoRef.value.setCurrentRow("roleId", currentRow.value.roleId)
  })
}


// 菜单
const replaceFields = ref({
  label: "menuName",
})
const treeData = ref([]);


const loadMenu = async () => {
  let result = await proxy.Request({
    url: api.loadMenu,
  })
  if (!result) {
    return;
  }
  treeData.value = result.data;
}
loadMenu();


const menuTreeRef = ref();
// 改变选择行
const handleRowClick = async (row) => {
  currentRow.value = row;
  let result = await proxy.Request({
    url: api.roleDetail,
    params: {
      roleId: row.roleId
    },
  })
  if (!result) {
    return;
  }
  menuTreeRef.value.setCheckedKeys(result.data.menuIds)
}

// 保存用户菜单
const saveMenu = async () => {
  let menuIdArray = menuTreeRef.value.getCheckedKeys();
  // 获取选中的父标签
  let halfMenuIdArray = menuTreeRef.value.getHalfCheckedKeys() || [];
  console.log(halfMenuIdArray)
  let result = await proxy.Request({
    url: api.saveRoleMenu,
    params: {
      roleId: currentRow.value.roleId,
      menuIds: menuIdArray.join(","),
      halfMenuIds: halfMenuIdArray.join(","),
    },
  })
  if (!result) {
    return;
  }
  proxy.Message.success("保存成功");
}

// 修改角色
const showEdit = () => {
  alert("未开发")
}
// 删除角色
const delRole = (data) => {
  proxy.Confirm(`你确定要删除${data.roleName}吗？`, async () => {
    // let result = await proxy.Request({
    //   url: api.delRole,
    //   params: {
    //     roleId: data.roleId
    //   },
    // })
    // if (!result) {
    //   return;
    // }
    proxy.Message.success("删除成功");
    // currentRow.value = {};
    // loadDataList();
  })
}
</script>


<style scoped lang="scss">
.box-card {
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tree-panel {
    overflow: auto;
    height: calc(100vh - 304px);
  }
}
</style>
